import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { routerRedux,Link } from 'dva/router';
import {
  Row, Col, Card, Form, Input, Select, Icon,
  Button, Table, Divider, Modal
} from 'antd';
// import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './RoleManagement.less';

/*
 角色管理
*/
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;


@connect(({ role }) => ({
  role,
  // loading: loading.models.rule,
}))
@Form.create()
export default class RoleManagement extends PureComponent {
  state = {
    modalVisible: false,
    isEdit: true,
    role: {},
  };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'role/fetch',
      payload: {
        // offset: 0,
        // limit: 10,
      },
    });
  }

  handleStandardTableChange = (pagination) => {
    this.props.dispatch({
      type: 'role/fetch',
      payload: {
        offset: (pagination.current - 1) * pagination.pageSize,
        limit: pagination.pageSize
      },
    });
  }

  edit = (record) => {
    // console.log("recordKKKKKKK")
    // console.log(record)
    this.setState({
      modalVisible: true,
      isEdit: false,
      role: record,
    })
  }

  handleAddJobs = () => {
    this.setState({
      modalVisible: true,
      isEdit: true,
    });
  }

  handleModalCancel = () => {
    this.setState({
      modalVisible: false,
    });
  }

  hanleCreateUserModalOk = () => {
    const { validateFieldsAndScroll } = this.props.form;

    validateFieldsAndScroll((error, values) => {
      if (!error) {
        // console.log("DADADADADADAD")
        // console.log(values)
        this.setState({
          modalVisible: false,
        });
        if (this.state.isEdit) {

          this.props.form.resetFields();
          this.props.dispatch({
            type: 'role/createRole',
            payload: {
              roleName: values.roleName,
              remark: values.remark,
            },
            callback: () => {
              this.props.dispatch({
                type: 'role/fetch',
                payload: {
                },
              });
            },
          });
        }
        else {
          this.props.form.resetFields();
          this.props.dispatch({
            type: 'role/updateRole',
            payload: {
              id: this.state.role.id,
              roleName: values.roleName,
              remark: values.remark,
            },
            callback: () => {
              this.props.dispatch({
                type: 'role/fetch',
                payload: {

                },
              });
            },
          });
        }
      }
    });
  };

  columns = [{
    title: '角色名',
    dataIndex: 'roleName',
    key: 'roleName',
    width: '33%'
  }, {
    title: '描述',
    dataIndex: 'remark',
    key: 'remark',
    width: '33%'
  }, {
    title: '操作',
    dataIndex: 'authority',
    render: (text, record) => (
      <Fragment>
        <a onClick={() => this.edit(record)}>编辑</a>
        <Divider type="vertical" />
        {/* <Button style={{float: 'right'}} onClick={this.handleConfiguration}>配置</Button> */}
        <Link to={`/system/jurisdiction-configuration?id=${record.id}`}>配置</Link>
      </Fragment>
    )
  }];

  // handleConfiguration= () => {
  //   this.props.dispatch(routerRedux.push(`/#/system/jurisdiction-configuration?id=${record.id}`));
  // }

  render() {
    const { role: { roleList,  loading } } = this.props;
    const { modalVisible, isEdit } = this.state;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    return (
      <PageHeaderLayout title="角色管理">
        <Card bordered={false}>
          <div className={styles.tableListOperator}>
            <Button style={{ marginBottom: 30 }} icon="plus" type="primary" onClick={() => this.handleAddJobs()}>
              添加角色
            </Button>
          </div>
          <div className={styles.tableList}>
            {/* {JSON.stringify(roleList)} */}
            <Table
              columns={this.columns}
              dataSource={roleList}
              // pagination={page}
              rowKey="id"
              loading={loading}
              bordered
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
        <Modal
          title={isEdit ? '添加角色' : '编辑角色信息'}
          visible={this.state.modalVisible}
          // confirmLoading={branchLoading}
          onOk={this.hanleCreateUserModalOk}
          onCancel={this.handleModalCancel}
        >
          <Form onSubmit={this.handleSubmit}>
            <FormItem {...formItemLayout} label="角色名称">
              {getFieldDecorator('roleName', {
                initialValue: isEdit ? null : this.state.role.roleName,
                rules: [{
                  required: true, message: '请输入角色名称',
                }],
              })(
                <Input placeholder="请输入角色名称" />
              )}
            </FormItem>

            <FormItem {...formItemLayout} label="角色描述">
              {getFieldDecorator('remark', {
                initialValue: isEdit ? null : this.state.role.remark,
                rules: [{
                  required: true, message: '请输入角色描述',
                }],
              })(
                <TextArea placeholder="请输入角色描述" rows={4} />
              )}
            </FormItem>
          </Form>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
